<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <meta http-equiv="Pragma"    content="no-cache"/>
     
    <meta http-equiv="Cache-Control"    content="no-cache"/>
     
    <meta http-equiv="Expires"    content="0"/>

    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/user.css" media="all"/>
</head>
<body class="childrenBody">
<form id="info_un_form" class="layui-form">
    <p hidden>
    <input  type="text" name="id" th:value="${userInfo.id}" lay-verify="title"
           autocomplete="off" class="layui-input">
    </p>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input id="trueName" type="text" name="trueName" lay-verify="required"  th:value="${userInfo.getTrueName()}"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-block">
                <input  id="idCard" type="text"  lay-verify="required"   name="idCard" th:value="${userInfo.idCard}"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <span id="idCardSpan" class="layui-form-label"></span>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
                <input  type="text" readonly disabled   name="mobile" th:value="${userInfo.mobile}"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input  type="email" name="email" lay-verify="required|email" th:value="${userInfo.email}"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block">
                <input id="validateCode"  maxlength="6" type="text" name="code"
                       placeholder="请输入验证码" lay-verify="required"  required   autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-warm" id="checkCode" >发送验证码</button>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="info_un_btn">立即提交</button>
        </div>
    </div>

</form>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>

<script type="text/javascript">
    layui.config({
        base: "/layui/"
    }).extend({
        index: 'lib/index'
    }).use(['index', 'form', 'jquery', 'table'], function () {
        var form = layui.form,
            table = layui.table,
            admin = layui.admin;


        //ajax异步验证码发送
        $("#checkCode").click(function (el) {

            $.ajax({
                type: "POST", //提交方式
                url: "/safe/sendValidateCode",//路径
                data: {
                    "bizType": "USER_INFO_MODIFY"
                },//数据，这里使用的是Json格式进行传输
                success: function (result) {//返回数据根据结果进行相应的处理

                    if(result.code==1){

                        layer.msg(result.message);

                        //设置按钮不能被点击
                        $("#checkCode").attr("disabled", true);
                        //按钮30s秒倒计时
                        var time = 30;
                        var id = setInterval(function () {
                            if (time >= 1) {
                                time--;
                                $("#checkCode").html(time + "s后重新发送");
                            } else {
                                //倒计时结束按钮又可以再次被点击
                                clearInterval(id);
                                $("#checkCode").removeAttr("disabled", false).html("重新发送");
                            }
                        }, 1000);


                    }else {
                        layer.msg(result.message);
                    }
                }
            });

        })



        form.on('submit(info_un_btn)',function (data) {


            $.post("/safe/updateUserInfo",data.field,function (result) {

                    if(result.code==1){
                        $("#validateCode").val(null);
                    }


                    layer.msg(result.message);


            });


            return false;
        });


    });





    //校验身份证
    function checkIdCard() {
        //鼠标离开时获值
        var idCardVal = getId('idCard').value;
        //获取正则表达式对象，正则表达式
        var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
        //判断用户输入的是否符合上述正则表达式对象
        if (reg.test(idCardVal)) {
            //返回true，说明符合，输入正确 合法
            getId('idCardSpan').innerHTML = '';
            //这里返回true，提交表单的时候要使用
            return true;
        } else {
            //非法
            getId('idCardSpan').innerHTML = '身份证不对';
            //提示信息是红色的
            getId('idCardSpan').style.color = 'red';
            //提交表单的时候要使用
            return false;
        }
    }



    //定义函数根据任意标签的id获取标签，防止根据标签id获取标签的代码重复
    function getId(id) {
        return document.getElementById(id);
    }
</script>
</body>
</html>